<template>
  <div class="container">
    <van-popup round v-model="popupShow" position="bottom">
      <template v-if="popupState == 'picker'">
        <van-picker
          show-toolbar
          :columns="pickerData"
          @confirm="pickerConfirm"
          @cancel="pickerCancel"
        />
      </template>
      <template v-if="popupState == 'date'">
        <van-datetime-picker
          type="datetime"
          title="选择时间"
          :min-date="minDate"
          @confirm="dateTimeConfirm"
          @cancel="dateTimeCancel"
        >
        </van-datetime-picker>
      </template>
    </van-popup>

    <div class="container-inner">
      <van-form
        ref="form"
        scroll-to-error
        :show-error-message="false"
        @failed="onFailed"
        @submit="onSubmit"
      >
        <div class="card">
          <div class="card-bar">
            <div class="card-bar-title">外来人员入校申请</div>
          </div>
          <div class="card-container">
            <van-field
              v-model="formData.visit_unit"
              required
              clearable
              :rules="[
                {
                  required: true,
                  message: '请检查所属单位',
                },
              ]"
              name="visit_unit"
              label="所属单位"
              placeholder="请输入所属单位"
            >
            </van-field>
            <van-field
              readonly
              clickable
              is-link
              name="healthy_code_color_name"
              :value="formData.healthy_code_color_name"
              label="健康码颜色"
              placeholder="点击选择"
              @click="pickerChange('healthy_code_color')"
              required
              :rules="[{ required: true, message: '请检查健康码颜色' }]"
            >
            </van-field>
            <van-field label="健康码" name="health_code_image">
              <template #input>
                <Uploader
                  v-model="formData.health_code_image"
                  :max-count="1"
                  file-dir="dlSchool/health/jkm"
                ></Uploader>
              </template>
            </van-field>
            <van-field
              v-model="formData.visit_car_num"
              clearable
              name="visit_car_num"
              label="入校车辆车号"
              placeholder="请输入入校车辆车号"
            >
            </van-field>
            <van-field
              readonly
              required
              is-link
              name="visit_date"
              :value="formData.visit_date"
              placeholder="点击选择"
              @click="pickerChange('visit_date')"
              label="入校时间"
              :rules="[{ required: true, message: '请检查入校时间' }]"
            >
            </van-field>
            <van-field
              v-model="formData.garrison_date"
              required
              clearable
              maxlength="20"
              :rules="[
                {
                  required: true,
                  validator: garrisonDateValidator,
                  message: '请检查驻校时间',
                },
              ]"
              name="garrison_date"
              label="驻校时间"
              placeholder="请输入驻校时间"
            >
            </van-field>
            <van-field
              v-model="formData.visit_contacts"
              required
              clearable
              maxlength="20"
              :rules="[{ required: true, message: '请检查密切接触人员' }]"
              name="visit_contacts"
              label="密切接触人员"
              placeholder="请输入密切接触人员"
            >
            </van-field>
            <van-field
              readonly
              clickable
              is-link
              name="visit_reason_name"
              :value="formData.visit_reason_name"
              label="来访原因"
              placeholder="点击选择"
              @click="pickerChange('visit_reason')"
              required
              :rules="[{ required: true, message: '请检查来访原因' }]"
            >
            </van-field>
            <van-field
              v-model="formData.visit_range"
              required
              clearable
              maxlength="100"
              :rules="[{ required: true, message: '请检查活动范围' }]"
              name="visit_range"
              label="活动范围"
              placeholder="请输入活动范围"
            >
            </van-field>
            <van-field
              v-model="formData.visit_remake"
              rows="3"
              autosize
              label="特别情况说明"
              type="textarea"
              maxlength="255"
              placeholder="请输入特别情况说明"
              required
              :rules="[{ required: true, message: '请检查特别情况说明' }]"
            >
            </van-field>
          </div>
        </div>
      </van-form>
    </div>

    <div class="bottom-bar">
      <van-button
        class="bottom-bar-btn"
        block
        size="large"
        color="#D58913"
        type="info"
        text="确认提交"
        @click="submitAction"
      />
    </div>
  </div>
</template>

<script>
import Uploader from '@/components/uploader'
import dict from '../../dict/others'
import healthDict from '../../dict/studentHealth'

export default {
  name: 'Apply',

  components: { Uploader },

  data() {
    return {
      dict,
      healthDict,
      route: {},
      popupShow: false,
      popupState: '',
      minDate: new Date(),
      formData: {},
      pickerType: '',
      pickerData: [],
    }
  },

  computed: {},

  watch: {},

  mounted() {
    this.route = this.$route.query
    this.userInfo = this.$store.state.user.userInfo
  },

  methods: {
    // 驻校时间校验
    garrisonDateValidator() {
      return /^0\.([1-9]|\d[1-9])$|^[1-9]\d{0,8}\.\d{0,1}$|^[1-9]\d{0,8}$/.test(
        this.formData.garrison_date
      )
    },
    pickerChange(type) {
      switch (type) {
        case 'visit_reason':
          this.popupState = 'picker'
          this.pickerType = 'visit_reason'
          this.pickerData = dict.visit_reason
          this.popupShow = true
          break
        case 'healthy_code_color':
          this.popupState = 'picker'
          this.pickerType = 'healthy_code_color'
          this.pickerData = healthDict.healthy_code_colour
          this.popupShow = true
          break
        case 'visit_date':
          this.popupState = 'date'
          this.pickerType = 'visit_date'
          this.popupShow = true
          break
      }
    },
    pickerConfirm(e) {
      switch (this.pickerType) {
        case 'visit_reason':
          this.formData.visit_reason_name = e.text
          this.formData.visit_reason = e.value
          this.popupShow = false
          break
        case 'healthy_code_color':
          this.formData.healthy_code_color_name = e.text
          this.formData.healthy_code_color = e.value
          this.popupShow = false
          break
      }
    },
    pickerCancel(e) {
      switch (this.pickerType) {
        case 'visit_reason':
          this.formData.visit_reason_name = ''
          this.formData.visit_reason = ''
          this.popupShow = false
          break
        case 'healthy_code_color':
          this.formData.healthy_code_color_name = ''
          this.formData.healthy_code_color = ''
          this.popupShow = false
          break
      }
    },
    dateTimeConfirm(e) {
      switch (this.pickerType) {
        case 'visit_date':
          this.formData.visit_date = this.$common.xeUtils.toDateString(
            e,
            'yyyy-MM-dd hh:mm'
          )
          this.popupShow = false
          break
      }
    },
    dateTimeCancel(e) {
      switch (this.pickerType) {
        case 'visit_date':
          this.formData.visit_date = ''
          this.popupShow = false
          break
      }
    },
    failNotice(msg) {
      this.$notify({ type: 'danger', message: msg })
    },
    onFailed(errorInfo) {
      this.failNotice(errorInfo.errors[0].message)
    },
    submitAction() {
      this.$refs.form.submit()
    },
    onSubmit() {
      this.$dialog
        .confirm({
          title: '是否确认提交',
          message: '',
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          confirmButtonColor: '#D58913',
          beforeClose: async (action, done) => {
            if (action === 'confirm') {
              const param = {
                ...this.formData,
                card_no: this.$route.query.card_no,
                type: 'outsider',
                school_id: this.$route.query.school_id,
              }
              this.$router.push({
                path: '/school/health',
                query: param,
              })
              done()
            } else {
              done()
            }
          },
        })
        .catch(() => {})
    },
  },
}
</script>

<style lang="less" scoped>
.container /deep/ .van-checkbox {
  min-height: 30px;
}

.container /deep/ .van-field__label span {
  display: inline-block;
  padding-left: 5px;
  width: 90%;
  text-align-last: justify;
}

.container {
  background: #f2f7fb;
  width: 100%;
  height: 100vh;
  box-sizing: border-box;

  &-inner {
    padding: 20px;
    .card {
      background: inherit;

      &-container {
        border-radius: 10px;
        overflow: hidden;
        background-color: white;
        padding: 10px;
      }
    }
  }

  .bottom-bar {
    position: absolute;
    bottom: 0;
    width: 100%;
    &-btn {
    }
  }
}
</style>
